import React, { Component } from 'react'

export default class App extends Component {
  a = 100

  render() {
    return (
      <div>
        <input />
        <button onClick ={ () =>{
          console.log("add1 :" + this.a)
        }}>add1</button>

        <button onClick = {this.handleClick2.bind(this)}>add2</button>

        <button onClick = {this.handleClick}>add3</button>

        <button onClick = {() => this.handleClick4()}>推荐这种写法</button>

      </div>
    )
  }

  handleClick2() {
    console.log("handleClick2 : ", this.a);  
  }

  handleClick = () => {
    console.log("handleClick");
  }

  handleClick4 = () => {
    console.log("handleClick4");
  }
}

/**
 * React 并不会真正的绑定事件到每一个具体的<>的元素上，而是采用事件代理的模式
 */


// 改变this指向的方式
/*
  call,   改变this指向，自动执行函数
  apply,  改变this指向，自动执行函数
  bind    改变this指向，不会自动执行，手动加括号执行函数
*/
var obj1 = {
  name:"obj1",
  getNmae(){
    console.log(this.name)
  }
}

var obj2 = {
  name:"obj2",
  getNmae(){
    console.log(this.name)
  }
}

obj1.getNmae();
obj1.getNmae.call(obj2);
obj1.getNmae.apply(obj2);
